<template>
  <div class="home">
    <cu-header-home />
    <div>
      <!-- classify -->
      <div class="panel-classify">
        <div class="text-center">
          <img :src="require('@/assets/images/title_l.png')" class="c-title-l" alt="" />
          <span class="c-title">{{ $t("home.1") }}</span>
          <img :src="require('@/assets/images/title_r.png')" class="c-title-r" alt="" />
        </div>
        <div class="classify-content mt20 container">
          <div v-for="(row, index) in typeList" :key="index">
            <div class="flex">
              <div class="classify-col" v-for="item in row" :key="item.id">
                <div class="classify-item flex flex-column flex-align-items-center felx-justify-content-center" :class="item.id === showDetail.id ? 'active' : ''" @click="handleSection(item, index)">
                  <img :src="item.imgUrl" alt="" />
                  <span class="classify-item-name mt10" style="text-align: center; font-weight: 900">{{ item.showName }}</span>
                </div>
              </div>
            </div>
            <div class="type-detail" v-show="index === showRowDetail">
              <div class="type-header">
                <label @click="handleSecDetail(showDetail)"><i class="el-icon-arrow-right"></i>{{ $t("home.2") }}<span>{{ $t("home.3") }}&nbsp;&nbsp;&nbsp;&nbsp;{{ showDetail.showName }}</span></label>
              </div>
              <div class="type-list">
                <div class="type-item" v-for="type in showDetail.categoryList" :key="type.id">
                  <label @click="handleType(type)"><i class="el-icon-arrow-right"></i>{{ type.showName }}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- recommend -->
      <div class="panel-recommend container">
        <div class="text-center mv40">
          <img :src="require('@/assets/images/title_l.png')" class="c-title-l" alt="" />
          <span class="c-title">{{ $t("home.4") }}</span>
          <img :src="require('@/assets/images/title_r.png')" class="c-title-r" alt="" />
        </div>
        <div class="recommend-content mt20">
          <div class="recommend-col-out">
            <div class="recommend-col" v-for="item in list" :key="item.id">
              <div class="recommend-item" @click="handleDetail(item)">
                <div class="jingxuan">
                  <img :src="item.showImg" alt="" />
                  <div class="recommend-item-title mv10">
                    <span class="recommend-tag" v-if="item.tag === '1' || item.tag === '3'">{{ $t("component.sendList.6") }}</span>
                  </div>
                </div>

                <div class="recommend-item-info">
                  <div class="recommend-item-title mv5">{{ item.name }}</div>
                  <div class="recommend-item-time">
                    <span>{{ item.areaName }}</span>
                  </div>
                  <div class="recommend-item-time">
                    <span>{{ item.createTime }}</span>
                  </div>
                  <div class="flex flex-justify-content-between flex-align-items-center">
                    <span class="recommend-item-price">{{ item.price | num2Money }} KZ</span>
                    <!-- <span class="recommend-item-unfavorite"><i class="fa fa-heart-o"></i></span> -->
                    <!-- <span class="recommend-item-favorited"><i class="fa fa-heart"></i></span> -->
                  </div>
                  <!-- <div class="recommend-item-userinfo flex flex-align-items-center">
                    <img :src="domain + item.portrait" alt="" />
                    <span>{{ item.creatorNick }}</span>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="text-center mv40">
          <button class="recommend-more" @click="handleMore">{{ $t("home.5") }}</button>
        </div>
      </div>
    </div>
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fb8c24; color: #fff">
      <div style="padding: 30px 0 20px 0">
        <img :src="require('@/assets/images/logo.png')" alt="" />
      </div>
      <div style="text-align: center; height: 100px; font-size: 20px; font-weight: 600">
        Aqui no classificados Vivebo Anúncios você pode anunciar grátis qualquer tipo de produto como:
        <br />carros, casas, celulares, carrinhos de bebê, entre outros!
      </div>
    </div>
    <div>
      <div>
        <cu-footer />
      </div>
    </div>
  </div>
</template>

<script>
import CuHeaderHome from "@/components/header-home";
import CuFooter from "@/components/footer/index2";
import Api from "@/api";
import { getImgUrl } from "@/utils";
import { Domain } from "@/constants";
export default {
  name: "Home",
  components: { CuHeaderHome, CuFooter },
  data() {
    return {
      domain: Domain,
      params: {
        pageSize: 10,
        pageNo: 1,
        tag: 2,
      },
      list: [],
      typeList: [],
      showDetail: {}, //detail object
      showRowDetail: -1, //detail row index
    };
  },
  created() {
    this.loadData();
    this.loadTypeData();
  },
  methods: {
    toChat() {
      this.$router.push({ path: "/test" });
    },
    loadData() {
      Api.goodsList(this.params).then((res) => {
        this.list = res.rows.map((item) => {
          const img = item.imgList ? JSON.parse(item.imgList)[0] : "";
          return Object.assign(item, { showImg: Domain + img });
        });
      });
    },
    loadTypeData() {
      Api.goodsTypeList().then((res) => {
        const result = res.map((item) => Object.assign(item, { imgUrl: getImgUrl(item.imgPath) }));
        //处理数组
        this.typeList = [];
        for (let i = 0; i < result.length; i += 9) {
          this.typeList.push(result.slice(i, i + 9));
        }
      });
    },
    handleDetail(item) {
      this.$router.push({
        path: "/detail",
        query: {
          id: item.id,
        },
      });
    },
    handleSection(item, index) {
      if (item.id === this.showDetail.id) {
        this.showDetail = {};
        this.showRowDetail = -1;
      } else {
        this.showDetail = item;
        this.showRowDetail = index;
      }
    },
    handleSecDetail(item) {
      this.$router.push({
        path: "/list",
        query: {
          type: item.id,
        },
      });
    },
    handleType(type) {
      this.$router.push({
        path: "/list",
        query: {
          type: type.sectionId + "," + type.id,
        },
      });
    },
    handleMore() {
      this.$router.push("/list");
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  background: #f2f2f2;
}
.container {
  width: 100%;
}
.c-title {
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 32px;
  color: #333333;
  margin: 0 10px;
}
.c-title-l {
  width: 16px;
  height: 20px;
}
.c-title-r {
  width: 16px;
  height: 20px;
}

/* 分类 */
.panel-classify {
  margin-top: 40px;
  background: #fff;
  border-radius: 4px;
  padding: 40px 15%;
  box-sizing: border-box;
  min-width: 1200px;

  .classify-col {
    width: calc((100%) / 9);
    .classify-item {
      position: relative;
      height: 140px;
      cursor: pointer;
      .classify-item-name {
        font-size: 14px;
      }
      &:hover {
        .classify-item-name {
          color: #fff;
          background-color: #fb8c24;
          padding: 0 5px;
        }
      }
      &.active {
        .classify-item-name {
          color: #fff;
          background-color: #fb8c24;
          padding: 0 5px;
        }
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 10px;
          border-color: transparent transparent #ddd;
        }
      }
      img {
        width: 90px;
        height: 90px;
        border-radius: 100%;
      }
      .classify-item-name {
        color: #595959;
      }
    }
  }
  .type-detail {
    border: 1px solid #e8e8e8;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 20px;

    .type-header {
      height: 40px;
      line-height: 40px;
      color: #595959;
      font-size: 16px;
      border-bottom: 1px solid #e8e8e8;
      box-sizing: border-box;
      label {
        cursor: pointer;
        &:hover {
          color: #fdaf66;
        }
      }
      span {
        margin-left: 10px;
        color: #999999;
      }
    }
    .type-list {
      display: flex;
      flex-wrap: wrap;
      .type-item {
        color: #595959;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        width: 33%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        label {
          cursor: pointer;
          &:hover {
            color: #fdaf66;
          }
        }
      }
    }
  }
}

/* 推荐 */
.recommend-col-out {
  display: grid;
  grid-template-columns: repeat(5, 20%);
  padding: 0 5%;
}
.recommend-col {
  // width: calc((100% - 128px) / 5);
  padding: 16px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 4px;
  margin-right: 15px;
  margin-bottom: 15px;

  cursor: pointer;
  &:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition-timing-function: ease-in-out;
  }
  &:nth-child(5n) {
    margin-right: 0;
  }
  .recommend-item {
    .jingxuan {
      position: relative;
      width: 100%;
      height: 170px;
      overflow: hidden;
      border-radius: 4px;
      img {
        width: 100%;
        height: 170px;
        object-fit: cover;
      }
      .recommend-tag {
        color: #fff;
        font-size: 12px;
        background: linear-gradient(235deg, #ff7144 0%, #f63e2d 100%);
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .recommend-item-title {
      color: #595959;
      font-size: 14px;
      line-height: 1.5;
      height: 40px;
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .recommend-item-time {
      color: #999;
      font-size: 12px;
      margin: 10px 0;
    }
    .recommend-item-price {
      font-size: 18px;
      color: #fb8c24;
      font-family: Arial Black;
    }
    .recommend-item-unfavorite {
      color: #fb8c24;
    }
    .recommend-item-favorited {
      color: #fb5724;
    }
    .recommend-item-userinfo {
      font-size: 12px;
      color: #999999;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-top: 10px;
    }
    .recommend-item-userinfo img {
      width: 24px;
      height: 24px;
      border-radius: 100%;
      display: inline-block;
      background-color: #f2f2f2;
      margin-right: 5px;
    }
  }
}
.recommend-more {
  width: 162px;
  height: 48px;
  background: #fb7924;
  border-radius: 4px;
  color: #fff;
  line-height: 47px;
  border: none;
  outline: none;
  cursor: pointer;
  &:hover {
    background: #fdaf66;
  }
  &:active {
    background: #e27e20;
  }
}
</style>
